import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.less']
})
export class BoxComponent {
  box = [
    {
      name: 1,
      bgc: '#ef3429',
      style: 'grid-column: span 2'
    },
    {
      name: 2,
      bgc: '#f68f25',
    },
    {
      name: 3,
      bgc: '#4ba846',
      style: 'grid-row: span 2'
    },
    {
      name: 4,
      bgc: '#0476c2',
      style: 'grid-column: span 2'
    },
    {
      name: 5,
      bgc: '#c077af',
    },
    {
      name: 6,
      bgc: '#f8d29d',
    },
    {
      name: 7,
      bgc: '#b4a87f',
    },
    {
      name: 8,
      bgc: '#d0e4a8',
    },
    {
      name: 9,
      bgc: '#4dc7ec',
    }
  ]

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.box, event.previousIndex, event.currentIndex);
    console.log(this.box)
  }
}
